<template>
  <div class="album-detail">
    <div class="detail-top">
      <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-zuojiantou" />
      </svg>
      <span>{{coverimg.artistName}}《{{coverimg.albumName}}》</span>
      <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-fx310" />
      </svg>
    </div>
    <div class="cover">
      <div class="cover-top">
        <img class="cover-img" :src="coverimg.coverUrl" alt />
        <img class="bg-img" src="@/assets/img/disc-plus.png" alt />
      </div>
      <div class="cover-name">
        <div class="album-name">{{coverimg.albumName}}</div>
        <div class="artist-name">{{coverimg.artistName}}</div>
      </div>
      <div class="detail-price">
        <div class="price-left">
          <div class="price">￥{{albumlist.price}}</div>
          <div class="sold">
            已售
            <span class="num">480</span> 张专辑
          </div>
        </div>
        <div class="support">立即支持</div>
      </div>
      <div class="tags">
        <div class="tag-list" v-for="item in albumlist.tags" :key="item.id">
          <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
            <use xlink:href="#icon-duigou" />
          </svg>
          <p>{{item}}</p>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detail-list">
        <span class="active">专辑详情</span>
        <span>粉丝活动</span>
        <span>评论</span>
      </div>
      <div class="zhuanji">
        <div class="descr">
          <p v-for="item in albumlist.descr" :key="item.id">{{item.resource}}</p>
        </div>
        <div class="video" v-if="albumlist.mvPlayUrl">
          <div class="mvcover" v-if="isShow">
            <img class="cover" :src="albumlist.mvCoverUrl" alt />
            <img class="play-icon" src="@/assets/img/play_btn_3x.png" @click="isShow=!isShow" alt />
            <div class="mv-title">{{albumlist.mvTitle}}</div>
          </div>
          <video controls preload="metadata" autoplay v-else>
            <source :src="albumlist.mvPlayUrl" />
          </video>
        </div>
        <div class="song-list">
          <div class="title">歌曲列表</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAlbumDetail } from "@/api/index.js";
import { useRoute } from "vue-router";

export default {
  data() {
    return {
      albumlist: [],
      coverimg: "",
      isShow: true
    };
  },

  async created() {
    const route = useRoute();
    let id = route.query.id;
    let res = await getAlbumDetail(id);
    console.log(res);
    this.albumlist = res.data.product;
    this.coverimg = res.data.album;
  }
};
</script>
<style scoped lang='less'>
.album-detail {
  width: 7.5rem;
  background-color: black;
  .detail-top {
    width: 7.5rem;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 0.1rem;
    align-items: center;
    span {
      flex: 1;
      color: #494949;
    }
    .icon {
      width: 0.45rem;
      height: 0.45rem;
      fill: #494949;
      margin-right: 0.2rem;
    }
  }
  .cover {
    position: relative;
    background-color: #494949;
    width: 7.5rem;
    margin: 0.3rem auto;
    .cover-top {
      width: 7.5rem;
      height: 4rem;
      .bg-img {
        position: absolute;
        width: 3rem;
        left: 2.85rem;
        top: 1rem;
        height: 3rem;
      }
      .cover-img {
        position: absolute;
        top: 1rem;
        left: 2.25rem;
        width: 3rem;
        height: 3rem;
        z-index: 99;
      }
    }
    .cover-name {
      width: 7.5rem;
      height: 1.2rem;
      margin-bottom: 0.2rem;
      border-bottom: 1px solid #2d2d2d;

      .album-name {
        color: white;
        // margin: 0.1rem auto;
        text-align: center;
      }
      .artist-name {
        color: white;
        text-align: center;
      }
    }
    .detail-price {
      display: flex;
      justify-content: space-between;
      height: 1.2rem;
      border-bottom: 1px solid #2d2d2d;
      .price-left {
        .price {
          color: red;
          font-weight: 600;
          font-size: 0.34rem;
        }
        .sold {
          color: #ccc;
          .num {
            color: #d2d2d2;
            font-weight: 600;
            font-size: 0.32rem;
          }
        }
      }
      .support {
        color: #fff;
        border: 1px solid red;
        border-radius: 0.3rem;
        background-color: red;
        height: 0.6rem;
        margin: 0.1rem 0.2rem;
        padding: 0.1rem 0.2rem;
        font-size: 0.26rem;
        text-align: center;
      }
    }
    .tags {
      display: flex;
      justify-content: space-around;
      height: 0.6rem;
      line-height: 0.6rem;
      border-bottom: 1px solid #2d2d2d;

      margin: auto;
      .tag-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        height: 0.6rem;
        line-height: 0.6rem;
        p {
          color: #aaa;
          font-size: 0.24rem;
          text-align: center;
        }

        .icon {
          width: 0.28rem;
          height: 0.28rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
  .detail {
    .detail-list {
      background-color: #494949;
      display: flex;
      justify-content: space-around;
      height: 1.2rem;
      line-height: 1.2rem;
      .active {
        color: red;
        border-bottom: 4px solid red;
      }
      span {
        font-size: 0.36rem;
        color: #fff;
      }
    }
    .zhuanji {
      .descr {
        margin: 0.3rem 0.2rem;
        height: 2rem;
        overflow: scroll;
        p {
          font-size: 0.22rem;
          color: #ccc;
        }
      }
      .video {
        height: 4.5rem;
        .mvcover {
          position: relative;
          .cover {
            position: absolute;
            width: 7.1rem;
            height: 4rem;
            margin-left: 0.2rem;
            border-radius: 0.2rem;
          }
          .play-icon {
            position: absolute;
            width: 1rem;
            height: 1rem;
            top: 1.7rem;
            left: 3.2rem;
          }
          .mv-title {
            position: absolute;
            font-size: 0.26rem;
            top: 3.8rem;
            left: 0.4rem;
          }
        }

        video {
          width: 7.1rem;
          height: 4rem;
          margin-left: 0.2rem;
          border-radius: 0.2rem;
        }
      }
      .song-list {
        height: 5rem;
        .title {
          margin-left: 0.2rem;
          color: #fff;
        }
      }
    }
  }
}
</style>